<template>
  <div class="search">
    <el-form ref="formRef" name="search" :inline="true" :model="searchParam" >
      <div class="search-container">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="searchParam.keyword" placeholder="请输入关键字" class="search-item" clearable />
        </el-form-item>
        <search-button :search="props.search" :reset="props.reset" />
      </div>
    </el-form>
    <permission :roles="props.roles"/>
  </div>
</template>

<script setup name="DictSearch">
import {systemStoreHook} from "@/stores/modules";
import Permission from "@/components/Permission/index.vue";
import SearchButton from "@/components/SearchButton/index.vue";

const formRef = ref();
const systemStore = systemStoreHook();
let searchParam = systemStore.getDictSearch;
const props = defineProps({
  roles: {
    type: Array,
    required: true
  },
  search: {
    type: Function,
    required: true
  },
  reset: {
    type: Function,
    required: true
  }
});

//重置
function handleReset() {
  formRef.value?.resetFields();
}
defineExpose({
  searchParam,
  handleReset
})
</script>

<style scoped lang="scss">
.search-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0 10px;
}

.search-btn {
  grid-column: 2 / span 1;
  margin-left: unset;
}
</style>
